import ListView from "@/components/listView"
import { sortData, sortStatus } from "@/data"
import { Key, useState } from "react"

/*
 * @Author: lmk
 * @Date: 2022-05-25 23:34:46
 * @LastEditTime: 2022-06-06 09:54:05
 * @LastEditors: lmk
 * @Description: 产品列表 一列/二列  我的收藏 公用该页面
 */
import { DownFill } from 'antd-mobile-icons'
export interface optionParams {
  label: string
  value: string
}
const Page = () => {
  const [form,setForm] = useState<{[key:string]:any}>({
    sort_data: '',
    sort_status: '',
    layout: 'all',
  })
  const getLabel = (value: string,options:optionParams[]) => {
    const findItem = options.find(val=>val.value===value);
    if(findItem){
      return findItem.label
    }
    return value
  }
  const SelectLabel = (props:{label:string,labelKey:string,options:optionParams[]})=>{
    const [isOpen,setIsOpen] = useState(false)
    return  <div>
        <div className="select-label h-10 flex items-center justify-center" onClick={()=>setIsOpen(!isOpen)}>
        <span className="text-13 mr-3">{getLabel(form[props.labelKey],props.options)}</span>
        <DownFill className={`transition-all ${isOpen ? 'rotate-180' : ''}`}/>
      </div>
    </div>
  }
  const renderView = (item: any, index: Key) => {
    return <div key={index}>111</div>
  }
  const layoutData:optionParams[] = [{
    label:'信息全部展示',
    value:'all'
  },{
    label:'列表简要展示',
    value:'list'
  }]
  const selectArr = [{
    label:'排序字段',
    key:'sort_data',
    options:sortData
  },{
    label:'排序状态',
    key:'sort_status',
    options:sortStatus
  },{
    label:'展示方式',
    key:'sort_data',
    options:layoutData
  },]
  const headerView = () => {
    return <div className="grid grid-cols-3">
      {selectArr.map((item,index)=>(<SelectLabel 
      label={item.label} 
      options={item.options} 
      key={index} 
      labelKey={item.key} />))}
    </div>
  }
  return <ListView
    url="/sign/api/homePage/shareProductPage"
    title='主力持股跟踪'
    headHeight={50}
    headerView={headerView}
    navRight={<span>首页</span>}
    renderView={renderView}
  />
}
export default Page;